@use "../../../../styles/lib/svg";

.class-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.class-item {
  margin: 4px 0;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;

  &:last-child {
    border-bottom: none;
  }

  .name {
    font-size: 15px;
  }

  .select-button {
    float: right;
    margin: 4px 8px;
  }

  .info {
    margin: 4px -4px;
    font-size: 14px;
  }

  .teacher,
  .capacity,
  .week,
  .time,
  .place,
  .point {
    display: inline-block;
    margin-left: 4px;

    .icon {
      display: inline-block;
      vertical-align: middle;

      width: 14px;
      height: 14px;
      margin-right: 2px;

      background-repeat: no-repeat;
    }
  }

  .teacher .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M262.571 307.243a176.512 176.512 0 1 0 353.024 0 176.512 176.512 0 1 0-353.024 0Zm711.808 116.992c-10.496-10.496-27.648-10.496-38.144 0L643.37 716.97c-2.304 2.304-3.968 5.12-5.248 7.936-.384 0-.64.128-1.024.128s-.768-.128-1.024-.128a26.957 26.957 0 0 1-36.224-1.792c-10.496-10.496-10.496-27.648 0-38.144l86.784-86.784c-36.864-36.352-84.608-63.488-138.496-77.568l-76.8 76.8-28.928 110.848c-.64 1.792-5.504 1.792-6.144 0L408.49 601.643l-80.384-80.384c-124.16 33.408-214.784 136.832-214.784 259.328v50.176c0 24.576 22.144 44.544 49.536 44.544h64v-84.608a14.592 14.592 0 1 1 29.184 0v84.608h460.032c27.392 0 49.536-19.968 49.536-44.544v-50.176c0-32.128-6.656-62.72-18.048-91.264l227.2-227.2c10.112-10.24 10.112-27.392-.384-37.888z"/></svg>'
    );
  }

  .capacity .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M230 309.167a176.6 176.6 0 1 0 353.2 0 176.6 176.6 0 1 0-353.2 0Z"/><path fill="#888" d="M491.2 495.767H352.4c-160.7 0-290.9 130.2-290.9 290.9 0 48.5 39.4 87.9 87.9 87.9h528.2c38.1 0 69-30.9 69-69v-54.4c0-141-114.4-255.4-255.4-255.4zm114.6-188c0 46.7-17 89.4-45.2 122.3-3.3 3.8-3.1 9.5.4 13.2 24.4 25.3 58.7 41 96.6 41 74.6 0 135-60.7 134.5-135.4-.5-73-59.9-132.7-132.9-133.5-20.6-.2-40.1 4.1-57.6 12.2-6.2 2.9-9.3 10-7 16.4 7.3 19.8 11.2 41.3 11.2 63.8z"/><path fill="#888" d="M681.8 506.167H643c-7.9 0-10.8 10.4-4 14.5 77.3 45.9 129.1 130.2 129.1 226.7v56.1c0 15.1-4.7 29.1-12.8 40.7-3.6 5.1 0 12.2 6.3 12.2H854c35.2 0 63.8-28.6 63.8-63.8v-50.2c0-130.5-105.7-236.2-236-236.2z"/></svg>'
    );
  }

  .place .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M524.05 861.455s-290.14-274.059-290.14-435.26c0-161.246 96.729-306.317 290.142-306.317 193.505 0 290.234 145.071 290.234 306.318 0 161.2-290.234 435.26-290.234 435.26zm0-338.53a145.071 145.071 0 1 0 0-290.188 145.071 145.071 0 0 0 0 290.142z"/></svg>'
    );
  }

  .week .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M823.25 862.156h-622.5c-42.976 0-77.813-34.836-77.813-77.812V356.375h778.125v427.969c0 42.976-34.836 77.812-77.812 77.812zM628.719 473.094c0-21.484-17.419-38.906-38.907-38.906H434.188c-21.483 0-38.906 17.422-38.906 38.906 0 21.487 17.423 38.906 38.906 38.906H541.18L434.188 725.984c0 10.746 8.71 19.453 19.453 19.453h38.906c10.745 0 19.453-8.707 19.453-19.453l116.719-233.437v-19.453zM122.937 278.563c0-42.976 34.837-77.813 77.813-77.813h81.738c8.073-22.554 29.102-38.906 54.434-38.906 25.332 0 46.36 16.352 54.434 38.906h241.289c8.073-22.554 29.102-38.906 54.434-38.906 25.332 0 46.36 16.352 54.434 38.906h81.737c42.976 0 77.813 34.837 77.813 77.813v38.906H122.938v-38.906zm544.688 0h38.906V200.75h-38.906v77.813zm-350.156 0h38.906V200.75h-38.906v77.813z"/></svg>'
    );
  }

  .time .icon {
    @include svg.background-svg(
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 887c207.103 0 375-167.897 375-375S719.103 137 512 137 137 304.897 137 512s167.897 375 375 375zM351.49 632.74l132.385-132.393V343.25a28.125 28.125 0 0 1 56.25 0V512a28.125 28.125 0 0 1-8.24 19.884L391.258 672.51a28.125 28.125 0 1 1-39.768-39.768z" fill="#888"/></svg>'
    );
  }

  .point .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#888" d="m548.169 187.895 76.106 161.276c5.91 12.438 17.252 21.082 30.432 23.081l170.26 25.855c33.063 5.031 46.32 47.556 22.36 71.953L724.104 595.62c-9.504 9.661-13.818 23.637-11.582 37.297l29.072 177.289c5.666 34.419-28.952 60.732-58.542 44.483l-152.29-83.693c-11.736-6.468-25.794-6.468-37.53 0l-152.295 83.692c-29.59 16.25-64.208-10.063-58.538-44.482l29.07-177.288c2.254-13.66-2.098-27.636-11.601-37.297L176.68 470.06c-23.956-24.398-10.74-66.926 22.36-71.954l170.243-25.855c13.137-1.996 24.497-10.642 30.386-23.08l76.124-161.277c14.818-31.345 57.599-31.345 72.375 0z"/></svg>'
    );
  }

  .details {
    margin: 4px -4px;
    color: var(--dark-grey);
    font-size: 12px;
  }
}
